<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<meta content="webkit" name="renderer" />
  	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <base href="<%=basePath%>">
    
    <title>基于WEB的人脸识别考勤系统——控制台</title>
    
	<!-- Bootstrap core CSS -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	<link rel="stylesheet" href="layui/css/layui.css" media="all">
  </head>
  
  <body style="padding-top: 0px">
  	<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
  		<h1 class="page-header">概述/<span class="text-muted"> Overview</span></h1>
  		<p>欢迎使用基于WEB的人脸识别考勤系统，本系统有如下特点</p>
  		<table class="layui-table">
		  <colgroup>
		    <col width="70">
		    <col width="200">
		    <col>
		  </colgroup>
		  <thead>
		    <tr>
		      <th>序号</th>
		      <th>名称</th>
		      <th>详细介绍</th>
		    </tr> 
		  </thead>
		  <tbody>
		    <tr>
		      <td>1</td>
		      <td>MATLAB PCA人脸识别</td>
		      <td>基于主成分分析(PCA)算法实现的人脸识别，并通过JAVA完成跨平台数据传递，用其作为考勤系统的主要签到手段。</td>
		    </tr>
		    <tr>
		      <td>2</td>
		      <td>TrackingJs 人脸检测</td>
		      <td>运行于前端的JS人脸检测系统，用于发现人脸，通过与前后台逻辑的深度结合，实现签到自动化。</td>
		    </tr>
		    <tr>
		      <td>3</td>
		      <td>专为高校设计的课程安排</td>
		      <td>针对大学复杂的课程所专门设计的课程逻辑，除了每个课程应有的信息外，加入了课程周次这个概念（开课时间、上多少周课、具体出现在哪一周），每门课程都可以有完整的课程安排，通过课程安
		      	排可以让本门课程按照需求出现在某些周、某些星期、某几节课。</td>
		    </tr>
		    <tr>
		      <td>4</td>
		      <td>自动化系统逻辑</td>
		      <td>在针对“签到”这个环节上，我做了许多逻辑处理，这些逻辑代码可以让要签到的用户群体只需要在上课前输入自己的班级就能开启系统。依赖于课程安排和时间表，系统会自动分析出这个班级此时此
		      	刻应该上什么课程，上第几节课，签到的人有没有迟到等，并通过与前台JS代码的结合实现连续签到。</td>
		    </tr>
		    <tr>
		      <td>5</td>
		      <td>不同角色不同功能</td>
		      <td>本系统拥有学生、教师、网站管理员三个角色：学生为基础检测对象，只能开启签到系统和使用人脸识别签到；<br>教师为系统的主要受益人，除了拥有学生拥有的所有权限，还能使用手动签到和系统
		      	控制台等功能，并能将自己任教的课程记录导出为符合观看习惯的EXCEL表格；<br>网站管理员拥有最高权限，除了拥有教师拥有的所有权限，还能对照片和教师这两个对象进行管理。</td>
		    </tr>
		    <tr>
		      <td>6</td>
		      <td>良好体验的管理系统</td>
		      <td>除了几乎每个对象都有的增删查改，我还制作了分页和多条件查询等功能，通过与Layui的结合，实现功能丰富且强大的管理系统。</td>
		    </tr>
		    <tr>
		      <td>7</td>
		      <td>简洁美观且经过优化的前台</td>
		      <td>使用Bootstrap作为底层样式，合理的在其之上添加Layui组件，制作出简洁美观的界面。通过弹窗与AJAX异步传输实现类似客户端的无缝体验。使用栅格系统实现响应式布局，可
		      	以完美兼容各种分辨率（甚至是手机、平板电脑），且对1024*768等小分辨率做出特殊优化，教室的小屏电脑也可以很好显示。</td>
		    </tr>
		    <tr>
		      <td>8</td>
		      <td>SSM框架 规范设计的后台</td>
		      <td>网站后台采用Spring+SpringMVC+MyBatis开发，从包与文件的命名、工具类的封装，再到控制器、Mapper、XML的编写，每一个环节都全力遵循设计规范，使其具有极高的
		      	易读性、拓展性、安全性。</td>
		    </tr>
		    <tr>
		      <td>9</td>
		      <td>数据可视化</td>
		      <td>依赖自动化系统逻辑，将学生信息、课程安排和考勤记录结合，实现了将某门课程的记录映射为“时间+学生姓名+签到情况”这样易读的表格，本门课程到今天为止所有的签到情况一目了然（
		      	若已结课则以结课时间为结束日期），并且支持将此HTML表格导出为EXCEL表格做备份处理。</td>
		    </tr>
		  </tbody>
		</table>
  	</div>
  	<script src="layui/layui.js"></script>
  	<script src="js/jquery.min.js"></script>
  </body>
</html>
